<template>
  <view class="view-content">
    <s-nav title="家庭成员" />
    <s-content>
      <view class="main">
        <view class="applicant-from">
          <!-- 成员列表 -->
          <view
            v-for="(item, index) in datalist"
            :key="index"
            class="body-container"
          >
            <input
              v-model="item.name"
              maxlength="50"
              type="text"
              placeholder="请输入姓名"
            />
            <view
              @click="item.name ? skip(item) : showToast()"
              class="image-icon"
            >
              <img class="icon" src="../static/image/down-icon.png" mode="" />
            </view>
          </view>
        </view>
        <view class="footer-container">
          <s-btn plain style="width: 100%" @submit="addDataMsg" title="新增">
            <img class="icon" src="../static/image/addIcon.png" mode="" />
          </s-btn>
        </view> </view
    ></s-content>
  </view>
</template>
<script>
import { checkIsJSON } from "../static/js/typeJson.js";
export default {
  data() {
    return {
      datalist: [],
    };
  },
  onLoad(option) {
    if (option.dataList && checkIsJSON(option.dataList)) {
      const arr = JSON.parse(option.dataList);
      this.datalist = [...arr];
    }
  },
  methods: {
    /*
     * 家庭成员数组加减
     */
    addDataMsg() {
      const arr = this.datalist;
      arr.push({
        name: "",
        id: "",
        index: arr.length,
      });
      this.datalist = arr;
    },
    /**
     * 轻提示
     */
    showToast() {
      uni.showToast({
        icon: "none",
        title: "请先输入姓名",
        duration: 1000,
      });
    },
    /**
     * 获取下降页面传递的参数
     * @param {*} object 参数数据
     */
    otherFun(object) {
      if (object) {
        if (!object.id) object.id = object.index + 1;
        this.$set(this.datalist, object.index, object);
      }
    },
    /**
     * 删除成员关系
     * @param {number} index 下标
     */
    delData(index) {
      if (index || index === 0) {
        this.$delete(this.datalist, index);
      }
    },
    /**
     * 跳转新增/编辑成员页
     * @param {Object} item 选中下钻成员数据
     */
    skip(item) {
      const jsonData = JSON.stringify(item);
      uni.navigateTo({
        url: `/amenity/pages/family/newMember?jsonData=${jsonData}`,
      });
    },
  },
};
</script>
<style lang="scss">
@import "../static/css/form.scss";
.main {
  .icon {
    width: 40rpx;
    height: 40rpx;
  }

  .applicant-from {
    box-shadow: none;

    &::v-deep .body-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 16rpx 0rpx #d9d8d8;
      border-radius: 16rpx 16rpx 16rpx 16rpx;

      &:not(:last-child) {
        margin-bottom: 24rpx;
      }

      .image-icon {
        height: 120rpx;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
      .uni-input-input {
        font-size: 28rpx;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 800;
      }
    }

    .uni-input-placeholder {
      @include fontStyle;
    }
  }
}
</style>
